<template>
    <section>
        <DetailsHeader title="账户管理" class="mb-24">
            <div style="margin-left: auto;">
                <a-dropdown :trigger="['click']" v-if="!tableList.length" class="card-opt">
                    <template #overlay>
                        <a-menu>
                            <a-menu-item key="personVisible" @click="handleAdd(1)">
                                <a-button type="link">个人收款账号</a-button>
                            </a-menu-item>
                            <a-menu-item key="enterpriseVisible" @click="handleAdd(2)">
                                <a-button type="link">企业收款账号</a-button>
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button type="primary">
                        添加
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
            </div>
        </DetailsHeader>

        <div class="page-content">
            <a-table :dataSource="tableList">
                <a-table-column key="receiptType" title="账户类型" data-index="receiptType">
                    <template #default="{ record }">
                        {{ record.type == '1' ? '个人' : record.type == '2' ? '企业' : '' }}
                    </template>
                </a-table-column>
                <a-table-column key="title" title="收款信息" data-index="title">
                    <template #default="{ record }">
                        <div v-if="record.type == '1'">持卡人： {{ record.accountName }}</div>
                        <div v-if="record.type == '2'">收款单位： {{ record.companyName }}</div>
                    </template>
                </a-table-column>
                <a-table-column key="cardNum" title="银行账号" data-index="cardNum" />
                <a-table-column key="title" title="其他" data-index="title">
                    <template #default="{ record }">
                        <div v-if="record.type == '1'">手机号： {{ record.phone }}</div>
                        <div v-if="record.type == '2'">开户银行名称： {{ record.bankName }}</div>
                    </template>
                </a-table-column>
                <a-table-column key="action" title="操作">
                    <template #default="{ record }">
                        <a-button type="link" @click="handleEdit(record)" style="padding-left:0;">查看</a-button>
                    </template>
                </a-table-column>
            </a-table>
        </div>

        <!-- 个人收款账户 -->
        <a-modal v-model:visible="personVisible" title="编辑账户信息" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="accountName" label="持卡人" :rules="[{ required: true, message: '请输入姓名' }]">
                    <a-input placeholder="请输入姓名" v-model:value="form.accountName"></a-input>
                </a-form-item>
                <a-form-item name="cardNum" label="银行账号" :rules="[{ required: true, message: '请输入银行账号' }]">
                    <a-input placeholder="请输入银行账号" v-model:value="form.cardNum"></a-input>
                </a-form-item>
                <a-form-item name="phone" label="手机号" :rules="[{ required: true, validator: validPhone }]">
                    <a-input placeholder="手机号" v-model:value="form.phone"></a-input>
                </a-form-item>
                <a-form-item name="idNum" label="身份证号码" :rules="[{ required: true, validator: validIdCard }]">
                    <a-input placeholder="请输入身份证号" v-model:value="form.idNum"></a-input>
                </a-form-item>
                <a-form-item name="companyRegisterPhone">
                    提示：请务必保证填写信息的准确性，否则您将无法收到资金
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 企业收款账户 -->
        <a-modal v-model:visible="enterpriseVisible" title="企业收款账户" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="companyName" label="收款单位名称" :rules="[{ required: true, message: '请输入收款单位名称' }]">
                    <a-input placeholder="请输入收款单位名称" v-model:value="form.companyName"></a-input>
                </a-form-item>
                <a-form-item name="cardNum" label="银行账户" :rules="[{ required: true, message: '请输入银行账号' }]">
                    <a-input placeholder="请输入银行账号" v-model:value="form.cardNum"></a-input>
                </a-form-item>
                <a-form-item name="bankName" label="开户银行名称" :rules="[{ required: true, message: '请输入开户银行名称' }]">
                    <a-input placeholder="请输入开户银行名称" v-model:value="form.bankName"></a-input>
                </a-form-item>
                <a-form-item name="companyRegisterPhone">
                    提示：请务必保证填写信息的准确性，否则您将无法收到资金
                </a-form-item>
            </a-form>
        </a-modal>
    </section>
</template>
<script setup name="CostAccount">
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getWithdrawAccountApi, addWithdrawAccount } from 'api/modules/api.cost'
import { XsyMessage } from '@/libs/util.toast'
import { validIdCard, validPhone } from '@/libs/util.valid.js'

const tableList = ref([])

const form = ref({})
const personVisible = ref(false)
const enterpriseVisible = ref(false)

const handleAdd = (type) => {
    form.value.type = type
    if (type == 1) {
        personVisible.value = true
    } else {
        enterpriseVisible.value = true
    }
}

const formRef = ref();

const handleOk = async () => {
    const params = {
        ...form.value,
    }
    try {
        const values = await formRef.value.validateFields();
        addWithdrawAccount(params).then((res) => {
            if (res.code == 0) {
                XsyMessage.success('操作成功');
                personVisible.value = false
                enterpriseVisible.value = false
                getList()
                formRef.value.resetFields();
            }
        })
    } catch (errorInfo) {
       
    }
}

// 点击取消重置表单
const handleCancel = () => {
    formRef.value.resetFields();
}

const queryParams = ref({
    pn: 1,
    ps: 10
})

const getList = () => {
    getWithdrawAccountApi(queryParams.value).then(res => {
        tableList.value = res.data.list || []
    })
};

getList()

// 编辑
const handleEdit = (record) => {
    form.value.type = record.type
    form.value = {
        ...record,
    }
    if (record.type == 1) {
        personVisible.value = true
    } else {
        enterpriseVisible.value = true
    }

}

</script>